import React, { Component, Fragment } from 'react';
import "./Address.scss";
import { NavBar, Icon } from 'antd-mobile';
class Dizhi extends Component {
  state = {
    addressbool: "none",
    clearedbool: "none",
    addnewarrress: [
      {
        value: "",
        name: "收货人",
        clearedbool: "none",
      },
      {
        value: "",
        name: "手机号码",
        clearedbool: "none",
      },
      {
        value: "",
        name: "所在区域",
        clearedbool: "none",
      },
      {
        value: "",
        name: "详细地址",
        clearedbool: "none",
      },
    ],
    arrress: [{
      ressbool: false,
      value: []
    }]
  }
  handleAddress = () => {
    this.setState({
      addressbool: "block",
    })
  }
  handleonChange = (index, e) => {
    let addnewarrress = Object.assign([], this.state.addnewarrress)
    addnewarrress[index].value = e.target.value
    this.setState({
      addnewarrress
    }, () => {
      if (this.state.addnewarrress[index].value.length > 0) {
        addnewarrress[index].clearedbool = "block"
      } else {
        addnewarrress[index].clearedbool = "none"
      }
      this.setState({
        addnewarrress
      })
    })
  }
  handleclearvalue = (i, e) => {
    let addnewarrress = Object.assign([], this.state.addnewarrress)
    addnewarrress[i].value = "";
    addnewarrress[i].clearedbool = "none";
    this.setState({
      addnewarrress
    })
  }
  handlebaocun = () => {
    let arrress = Object.assign([], this.state.arrress)
    arrress.value.push(...this.state.addnewarrress)
    this.setState({
      arrress
    })

  }

  render () {
    return (
      <Fragment>
        <div className="address">
          <NavBar className="address-nav"
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}

          >收货地址</NavBar>
          {/* 地址列表 */}
          <div className="address-list">
            <div className="address-list-left">
              <input type="checkbox" className="tui-checkbox" />
            </div>
            <div className="address-list-right">
              <div className="right-top">
                <div className="top-left-name">谢文丽</div>
                <div className="top-right-num">12423454531</div>
              </div>
              <div className="right-bottom">
                <span>默认</span>
                <i> 甘肃省嘉峪关市嘉峪关市1</i>
              </div>
            </div>
          </div>
          <div className="list-bottom">
            <div className="bianji">编辑</div>
          </div>
          <div className="addaddress" onClick={this.handleAddress}>+新建地址</div>
        </div>
        <div className="addnewress" style={{ display: this.state.addressbool }}>
          <NavBar className="addnewress-nav"
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => this.setState({ addressbool: "none" })}

          >新增收货地址</NavBar>

          <div className="oWrap addressEdit">
            {this.state.addnewarrress.map((v, i) => (
              <div className="oItem" key={v.name}>
                <div className="itemName">{v.name}</div>
                <div className="addInfo">
                  <input type="text" value={v.value} onChange={this.handleonChange.bind(this, i)} />
                  <i className="oIcon cleared" style={{ display: v.clearedbool }} onClick={this.handleclearvalue.bind(this, i)}>X</i>
                </div>
              </div>
            ))}
          </div>
          <div className="btnBox" onClick={this.handlebaocun}>
            <div className="Btn">保存并使用</div>
          </div>
        </div>
      </Fragment>

    );
  }
}

export default Dizhi;
